<template>
  <a-modal
    :confirmLoading="confirmLoading"
    :visible="visible"
    :width="1000"
    title="角色用户"
    @cancel="handleCancel"
    @ok="handleSubmit"
  >
    <a-card :bordered="false" v-if="visible">
     
      <s-table ref="rolesUser_table" :columns="columns" :data="loadData" 
        
        :rowKey="(record) => record.id"
       > </s-table>
    </a-card>
  </a-modal>
</template>

<script>
import { STable } from '@/components'
import { getUserPage } from '@/api/modular/system/userManage'
export default {
  components: {
    STable,
  },
  data() {
    return {
      row:{},
      queryParam: {},
      visible: false,
      confirmLoading: false,
      columns: [
        { title: '账号', dataIndex: 'account' },
        { title: '姓名', dataIndex: 'name' },
        { title: '电话', dataIndex: 'phone' },
        { title: '角色编码', dataIndex: 'roleCode' },
        { title: '角色名称', dataIndex: 'roleName' },

      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        return getUserPage({...parameter,id:this.row.id}).then((res) => {
          return res.data
        })
      },
      selectedRowKeys: [],
      options: {
        alert: {
          show: false,
          clear: () => {
            this.selectedRowKeys = []
          },
        },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange,
        },
      },
    }
  },
  mounted() {},
  methods: {
    open(row) {
      this.row=row
      this.visible = true    
    },
    handleSubmit() {
      this.visible = false
    },
    handleCancel() {
      this.visible = false
    },

    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
  },
}
</script>

<style scoped>
  /deep/ .ant-card-body{
  padding: 0 ;
}
</style>